<template>
  <div>
    <admin-container>
      <global-config></global-config>
    </admin-container>
    <admin-container>
      <el-form ref="contactForm" :rules="rules" :model="contactForm" size="small" inline>
        <div>
          <el-form-item>
            <el-button-group>
              <el-button v-if="contactForm.id == 0" type="primary" @click="addContacts">
                <i class="fa fa-plus"></i> 新增
              </el-button>
              <el-button v-else type="primary" @click="updateContacts">
                <i class="fa fa-check"></i> 保存
              </el-button>
              <el-button type="primary" icon="el-icon-refresh-left" @click="reset">重置</el-button>
              <el-button type="warning" icon="el-icon-remove" @click="resetContactForm">清空</el-button>
            </el-button-group>
          </el-form-item>
        </div>
        <div class="form-item-row">
          <el-form-item label="中文" label-width="100px" prop="name">
            <el-input v-model="contactForm.name" :maxlength="50" show-word-limit size="small"
              placeholder="展示标题"></el-input>
          </el-form-item>
          <el-form-item class="form-item-row-max" label="展示内容" label-width="100px" prop="content">
            <el-input v-model="contactForm.content" :maxlength="200" show-word-limit size="small" style="width: 100%;"
              placeholder="请输入中文展示内容"></el-input>
          </el-form-item>
        </div>
        <div class="form-item-row">
          <el-form-item label="Contact" label-width="100px" prop="nameEn">
            <el-input v-model="contactForm.nameEn" :maxlength="50" show-word-limit size="small"
              placeholder="Contact information"></el-input>
          </el-form-item>
          <el-form-item class="form-item-row-max" label="Content" label-width="100px">
            <el-input v-model="contactForm.contentEn" size="small" :maxlength="255" show-word-limit style="width: 100%;"
              placeholder="Contact information"></el-input>
          </el-form-item>
        </div>
        <div class="form-item-row">
          <el-form-item label="图标" label-width="100px" prop="icon">
            <el-input v-model="contactForm.icon" size="small" placeholder="请输入联系方式图标"></el-input>
          </el-form-item>
          <el-form-item>
            <el-link type="primary" target="_blank" href="https://fontawesome.dashgame.com/">图标网站 FontaWesome</el-link>
          </el-form-item>
          <el-form-item>
            <label>显示</label>
            <el-switch v-model="contactForm.display"></el-switch>
          </el-form-item>
          <el-form-item>
            <label>右边显示</label>
            <el-switch v-model="contactForm.rightDisplay"></el-switch>
          </el-form-item>
          <el-form-item>
            <label>高亮</label>
            <el-switch v-model="contactForm.highlight"></el-switch>
          </el-form-item>
        </div>
      </el-form>
      <el-table border size="small" :data="contacts" style="width: 100%">
        <el-table-column label="排序" align="center" width="50px">
          <template slot-scope="scope">
            <div class="sort">
              <el-button @click="changeSort(scope.row.id, -1)" type="text">
                <i class="fa fa-sort-up"></i>
              </el-button>
              <el-button @click="changeSort(scope.row.id, 1)" type="text">
                <i class="fa fa-sort-desc"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template slot-scope="scope">
            <el-button type="text" @click="clickEdit(scope.row)">
              <i class="fa fa-edit"></i> 编辑
            </el-button>
            <el-button class="danger" type="text" @click="deleteContact(scope.row.id)">
              <i class="fa fa-trash-o"></i> 删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="显示" align="center" width="65px">
          <template slot-scope="scope">
            <el-switch @change="changeDisplay(scope.row)" v-model="scope.row.display" inactive-color="#e7e7e7">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="侧显示" align="center" width="65px">
          <template slot-scope="scope">
            <el-switch @change="changeDisplay(scope.row)" v-model="scope.row.rightDisplay" inactive-color="#e7e7e7">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="展示标题" width="200px">
          <template slot-scope="scope">
            <div class="us">
              <div class="icon">
                <i :class="['fa', scope.row.icon]"></i>
              </div>
              <div class="us-text">
                <div>
                  <b class="name">{{ scope.row.name }}</b>
                </div>
                <div>{{ scope.row.nameEn }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="展示内容">
          <template slot-scope="scope">
            <div>
              <b>{{ scope.row.content }}</b>
            </div>
            <div v-if="scope.row.contentEn != null && scope.row.contentEn != ''">{{ scope.row.contentEn }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createDate" label="修改时间" width="150"></el-table-column>
      </el-table>
      <div class="page-tool">
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="index"
          :total="toalNumber" @current-change="changePageIndex">
        </el-pagination>
      </div>
    </admin-container>
  </div>
</template>

<script>
import AdminContainer from '@/components/Admin/AdminContainer.vue';
import * as ContactsApi from '@/api/admin/contactApi';
import GlobalConfig from './globalConfig.vue';

export default {
  components: {
    AdminContainer,
    GlobalConfig
  },
  data () {
    return {
      contactForm: {
        id: 0,
        name: '',
        nameEn: '',
        content: '',
        icon: '',
        display: true,
        contentEn: '',
        rightDisplay: true,
        highlight: false
      },
      retainContactForm: null,
      contacts: [],
      index: 0,
      pageSize: 20,
      toalNumber: 0,
      rules: {
        name: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' },
          { max: 50, message: '联系方式不能超过50个字符', trigger: 'blur' }
        ],
        nameEn: [
          { required: true, message: 'Contact information不能为空', trigger: 'blur' },
          { max: 50, message: 'Contact information不能超过50个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '联系内容不能为空', trigger: 'blur' },
          { max: 100, message: '联系内容不能超过100个字符', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '图标不能为空', trigger: 'blur' },
          { max: 50, message: '图标不能超过50个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getAllContacts () {
      var self = this;
      ContactsApi.getAllContacts(self.index, self.pageSize)
        .then(res => {
          self.contacts = res.data;
          self.index = res.pageIndex;
          self.pageSize = res.pageSize;
          self.toalNumber = res.toalNumber;
        })
        .catch(err => {
          self.$message.error('接口发生错误');
        });
    },
    addContacts () {
      var self = this;
      self.$refs['contactForm'].validate(valid => {
        if (valid) {
          ContactsApi.addContacts(self.contactForm)
            .then(res => {
              self.$message({
                message: '添加成功',
                type: 'success'
              });
              self.resetContactForm();
              self.getAllContacts();
            })
            .catch(err => {
              self.$message.error('接口发生错误');
            });
        }
        else {
          return false;
        }
      })
    },
    resetContactForm () {
      // 将contactForm对象重置为一个空对象
      this.contactForm = {
        id: 0,
        name: '',
        nameEn: '',
        content: '',
        icon: '',
        contentEn: '',
        rightDisplay: true,
        display: true,
      };
    },
    changePageIndex (num) {
      var self = this;
      self.index = num;
      self.getAllContacts();
    },
    updateContacts () {
      var self = this;
      ContactsApi.updateContacts(self.contactForm)
        .then(res => {
          {
            self.$message({
              message: '修改成功',
              type: 'success'
            });
            self.resetContactForm();
            self.getAllContacts();
          }
        })
        .catch(err => {
          self.$message.error('接口发生错误');
        });
    },
    deleteContact (id) {
      var self = this;
      self.$confirm('删除此联系方式, 是否确认?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ContactsApi.deleteContacts(id)
          .then(res => {
            self.$message({
              message: '删除成功',
              type: 'success'
            });
            self.getAllContacts();
          })
          .catch(err => {
            self.$message.error('接口发生错误');
          });
      }).catch(() => {

      });
    },
    clickEdit (item) {
      var self = this;
      self.retainContactForm = JSON.parse(JSON.stringify(item));
      self.contactForm = JSON.parse(JSON.stringify(item));
    },
    reset () {
      var self = this;
      self.contactForm = JSON.parse(JSON.stringify(self.retainContactForm));
    },
    changeDisplay (item) {
      var self = this;
      ContactsApi.contactDisplay(item.id, item.display, item.rightDisplay)
        .then(res => {
          if (res.code == 200) {
            self.$message({
              message: '保存成功',
              type: 'success'
            });
          } else {
            self.$message.error(res.exception);
          }
        })
        .catch(err => {
          self.$message.error('接口发生错误，请重新尝试');
        });
    },
    changeSort (id, sort) {
      var self = this;
      ContactsApi.changeSort(id, sort)
        .then(res => {
          if (res.code == 200) {
            self.$message({
              message: '保存成功',
              type: 'success'
            });
            self.getAllContacts();
          } else {
            self.$message.error(res.exception);
          }
        })
        .catch(err => {
          self.$message.error('接口发生错误，请重新尝试');
        });
    }
  },
  mounted () {
    var self = this;
    self.getAllContacts();
  }
}
</script>

<style scoped>
.row {
  margin-top: 5px;
}

.page-tool {
  margin-top: 20px;
}

.danger {
  color: #F56C6C;
}

td .el-button+.el-button {
  margin-left: 2px;
}

.name {
  font-size: 14px;
}

.us {
  display: flex;
  align-items: center;
}

.us .icon {
  width: 30px;
  font-size: 24px;
}

.us .us-text {
  margin-left: 15px;
  line-height: 18px;
  flex: 1;
}

.form-item-row {
  width: 100%;
  display: flex;
}

.form-item-row-max {
  flex: 1;
  display: flex !important;
}

.form-item-row-max /deep/ .el-form-item__content {
  flex: 1 !important;
}

.sort {
  display: flex;
  flex-direction: column;
}

.sort .el-button {
  padding: 0px;
  color: #909399;
}

.sort .el-button:hover {
  color: #409EFF;
}
</style>